﻿
@{
    ViewBag.Title = "WinProducts | Home";
}

<h2>Index</h2>
<div class="row">
    <div class="col-md-2">
        @Html.Partial("_LeftVerticalMenu")
    </div>
    <div id="software-reviews" class="col-md-7 padding-left-50">
        <div class="row">
            <div class="col-md-9 text-left">
                <ol class="breadcrumb">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Library</a></li>
                  <li class="active">Data</li>
                </ol> 
            </div>
            <div class="col-md-3 text-right">
                <button type="button" class="btn btn-primary">See all >></button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-left">
                <table class="table table-striped table-bordered table-condensed">
                    <tbody data-bind="foreach: TopRankedProducts">
                        <tr>
                            <td>
                                <div class="row topranked" >
                                    <div class="col-md-2">
                                        <img width="50px" height="50px" data-bind="attr:{src: trpImg}" />  
                                    </div>
                                    <div class="col-md-7">
                                        <h4>
                                            <a data-bind="text: trpTitle, click: $parent.redirectProductPage"></a>
                                            <br />
                                            <small data-bind="html: trpSDesc"></small>
                                        </h4>
                                    </div>
                                    <div class="col-md-3">
                                        <div>Editors rating</div>
                                        <div data-bind="event: { mouseover: $parent.testIfWork, load: $parent.convertToNstars }">XXX</div>
                                    </div>
                                </div>                                
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div  class="col-md-3">
        @Html.Partial("_PopularDownloads")
    </div>
</div>
<script>
    var TopRankedProductsLists = [
                            {
                                "pdi": 1,
                                "trpImg": "",
                                "trpScn": 4,
                                "trpTitle": "Avast Free Antivirus 2015",
                                "trpSDesc": "Read, convert, merge, edit, etc.." + "<a class='read-more' data-bind='click: $parent.redirectProductPage'> read more...</a>"
                            },
                            {
                                "pdi": 2,
                                "trpImg": "",
                                "trpScn": 0,
                                "trpTitle": "Avast Free Antivirus 2014",
                                "trpSDesc": "Read, convert, merge, edit, etc.." + "<div class='read-more'> read more...</div>"
                            },
                            {
                                "pdi": 3,
                                "trpImg": "",
                                "trpScn": 1,
                                "trpTitle": "Avast Free Antivirus 2013",
                                "trpSDesc": "Read, convert, merge, edit, etc.." + "<div class='read-more'> read more...</div>"
                            },
                            {
                                "pdi": 4,
                                "trpImg": "",
                                "trpScn": 2,
                                "trpTitle": "Avast Free Antivirus 2012",
                                "trpSDesc": "Read, convert, merge, edit, etc.." + "<div> read more...</div>"

                            },
                            {
                                "pdi": 5,
                                "trpImg": "",
                                "trpScn": 4,
                                "trpTitle": "Avast Free Antivirus 2011",
                                "trpSDesc": "Read, convert, merge, edit, etc.." + "<div> read more...</div>"
                            },
                            {
                                "pdi": 6,
                                "trpImg": "",
                                "trpScn": 3,
                                "trpTitle": "Avast Free Antivirus 2010",
                                "trpSDesc": "Read, convert, merge, edit, etc.." + "<div> read more...</div>"
                            },
                            {
                                "pdi": 7,
                                "trpImg": "",
                                "trpScn":5,
                                "trpTitle": "Avast Free Antivirus 2009",
                                "trpSDesc": "Read, convert, merge, edit, etc.." + "<div> read more...</div>"
                            }
                        ];

    var TopRankedProductsViewModel = function () {
        var self = this;

        self.redirectProductPage = function (productselected) {
            alert("Product selected id: " + productselected.pdi);
            //if (confirm("Are you sure you want to delete this profile?")) {
            //    self.PopularDownloads.remove(profile);
            //}
            //if (DummyProfile.length <= 0) {
            //    alert("no more records exist");
            //}
        };

        self.convertToNstars = function (productselected) {
            alert("loaded..");
            console.log("Product selected star counts: " + productselected.trpTitle);
        };

        self.testIfWork = function (productselected) {
            alert("Product selected hover testing: " + productselected.trpTitle);
        }
        var refresh = function () {
            if (TopRankedProductsLists.length > 0) {
                self.TopRankedProducts(TopRankedProductsLists);
            }
            else {
                alert("no more records exist");
            }
        };

        // Public data properties
        self.TopRankedProducts = ko.observableArray([]);
        refresh();
    };
    
    ko.applyBindings(new TopRankedProductsViewModel(), document.getElementById("software-reviews"));

   
</script>
